<template>
<blank-layout>
  <div class="login-box">
    <div class="login-welcome" v-if="showLogin === false">
      <!-- progress 是展示的外环颜色，100代表是全满  native修饰符，是原生的意思 -->
      <van-circle
        v-model="progress"
        :clockwise="false"
        size="40px"
        :text="Math.ceil(progress / 20) + 's'"
        color="#ff5b02"
        style="position: absolute; right: 10px"
        :rate="100"
        @click.native="closeTimer"
      />
      <span class="title">玄机智能采购系统</span>
      <span class="sub">{{ welText }}</span>
    </div>
    <div class="login-content" v-else>
      <span class="title"> 玄机智能采购系统 </span>
      <div class="line">
        <input type="text" v-model="obj.phone" placeholder="输入手机号" />
      </div>
      <div class="line">
        <input type="text" v-model="obj.vdtCode" placeholder="输入验证码" />
        <span @click="getVdtCode">{{ vdtText }}</span>
      </div>
      <van-checkbox v-model="remember" checked-color="#ff5b02"
        >是否记住手机号码</van-checkbox
      >
      <van-checkbox v-model="auto" checked-color="#ff5b02"
        >是否免登陆</van-checkbox
      >
      <!-- <van-button block color="" @click="AxiosM">登录</van-button> -->
      <van-button block color="#ff5b02" @click="loginbtn">登录</van-button>
    </div>
    <span class="footer">design by qianfeng &copy; 2021-</span>
  </div>
</blank-layout>
</template>
<script>
//因为apis导入的是方法  所有要打{ } 插件不打
import {
  getVdtCodeApi,
  getLoginApi,
  getLoginBtn,
  userInfoApi,
  MianPort,
} from "../../apis/loginApi";
import { AES, enc } from "crypto-js";
export default {
  data() {
    return {
      showLogin: false,
      remember: false,
      auto: false,
      progress: 100,
      autoFlag: "loading",
      welText: [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "王一博的喉结太绝活了",
      ][new Date().getMonth()],
      obj: { phone: "", vdtCode: "" },
      vdtText: "获取验证码",
      timer:null,
    };

  },
  created() {
    this.loopTimer();
    // 判断是否免登录
    this.autoLogin();
  },
  methods: {
    // 倒计时
    loopTimer() {
  this.timer= setTimeout(() => {
        this.progress -= 1;
        if (this.progress > 1) {
          this.loopTimer();
        } else {
          // 还要考虑免登陆的问题
          if(this.autoFlag==='home'){
            this.$router.push('/home')
          }else{
            this.showLogin = true;
          }
        }
      }, (5 * 1000) / 100);
    },
     // 点击倒计时跳转页面
    closeTimer() {
      if (this.autoFlag === "loading") return;
      if (this.autoFlag === "home") {
        this.$router.push("/home");
        return;
      }
      this.showLogin = true;
      // 清除定时器
      clearTimeout(this.timer)
    },
// 获取验证码
    async getVdtCode() {
      console.log("obj.phone", this.obj.phone);
      // 节流，点击一次，就不能在点击了 需要一个标识来判断，可以用vdtText这个文字来判定
      if (this.vdtText !== "获取验证码") return;
      // 校验手机号
      if (!/^1[3-9]{1}[0-9]{9}$/.test(this.obj.phone)) {
        this.$toast({
          message: "手机号输入错误",
          position: "bottom",
        });
        return;
      }
      this.vdtText = "获取中...";
      let result = await getVdtCodeApi(this.obj.phone);
      if (result.code !== 200) {
        this.$toast({
          message: "获取验证码失败",
          position: "bottom",
        });
        this.vdtText = "获取验证码";
        return;
      }
      this.$toast.success("验证码:" + result.data.vdtCode);
      // 执行递归条件，倒计时
      this.loopVdtTimer(Date.now());
    },
    // 验证码倒计时
    loopVdtTimer(startTime) {
      // 需要递归条件，，不然会一直递归
      setTimeout(() => {
        // 用当前时间，减上一次调用函数的时间
        let nowTime = 5 - Math.ceil((Date.now() - startTime) / 1000);
        if (nowTime > 0) {
          this.vdtText = "重新获取" + nowTime + "s";
          this.loopVdtTimer(startTime);
        } else {
          // 用户又可以获取验证码了---修改标识
          this.vdtText = "获取验证码";
        }
      }, 200);
    },
   
    // 判断是否有免登录
   async  autoLogin() {
    //  免登陆需要token
      let token = localStorage.getItem("auto-token");
      if (!!token) {
        this.$store.commit("common/setToken", token);
        // TODO 发送请求 调用免登陆接口
        let result=await MianPort()
        console.log('免登陆',result)
        if(result.code===200){
          this.$store.commit('common/setUser',result.data)
          this.autoFlag='home'
        }
        else{
          // 免登录失败，需要查看是否需要记住手机号
          let phoneNum=localStorage.getItem('auto-phone')
          if(!!phoneNum){
            this.obj.phone=AES.decrypt(phoneNum,'keysddffsa').toString(enc.Utf8)
            console.log(' this.obj.phone', this.obj.phone)
            this.remember=true
          }
          this.autoFlag='login'
        }
      } else {
        // 判断是否有记住手机号 放在内存中的手机号，有就进行解密
        let phoneNum = localStorage.getItem("auto-phone");
        if (!!phoneNum) {
          // 解密 decrypt
          this.obj.phone = AES.decrypt(phoneNum, "keysddffsa").toString(enc.Utf8);
          console.log("else  this.obj.phone", this.obj.phone)
          this.remember = true;
        }
        // 需要一个标识，免登录接口还在请求，如果接口调用成功就去首页，如果失败还有免登陆标准不存在展示登录页面
        this.autoFlag = "login";
      }
    },
   
    // 点击登录页面
    async loginbtn() {
      // 先校验数据，phone 验证码是否输入正确
      if (!/^1[3-9]{1}[0-9]{9}$/.test(this.obj.phone)) {
        this.$toast("正确输入手机号");
        return;
      }
      // 验证码校验
      if (!/^[0-9]{4}$/.test(this.obj.vdtCode)) {
        this.$toast("正确输入验证码");
        return;
      }
      // 开始数据接口调用  轻提示
      this.$toast.loading({
        message: "登录中...",
        forbidClick: true,
        duration: 0,
      });
      // 登录接口
      let result = await getLoginBtn(this.obj);
      // 返回的信息是 id 和token
      console.log("return", result);
      if (result.code !== 200) {
        this.$toast("登录失败，请重试");
        // 关闭提示
        this.$toast.clear()
        return;
      }
      // 因为用户信息接口需要使用token，所有要先缓存token，在请求接口
      this.$store.commit("common/setToken", result.data.token);
      // 调取用户信息
      let user = await userInfoApi(result.data.id);
      console.log('用户信息',user)
      // 将用户信息缓存在vuex中
      this.$store.commit("common/setUser", user.data);
      // 判断用户是否记住手机号，用户是否同意免登陆
      if (this.remember) {
        // 保护手机号，进行加密设置
        localStorage.setItem(
          "auto-phone",
          AES.encrypt(this.obj.phone, "keysddffsa").toString()
        );  // 对称加密的密钥，（输入的数据，密钥）
      } else {
        localStorage.removeItem("auto-phone");
      }
      if (this.auto) {
        localStorage.setItem("auto-token", result.data.token);
      } else {
        localStorage.removeItem("auto-token");
      }
      // 关闭加载框
      this.$toast.clear()
      // 在vuex中获取数据，不会造成线程阻塞
      console.log("user.data.role",user.data.role)
      this.$store.dispatch('common/rightAct',user.data.role)
      // 首页跳转
      this.$router.push('/home')
    },

    // axios测试
    async AxiosM() {
      let result = await getVdtCodeApi("13611660000");
      console.log(result);
    },
    async AxiosB() {
      let result = await getLoginApi("admin00", "admin00");
      console.log("rusulthahah", result);
    },
  },
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>